<!--  -->
<template>
  <div class="rule-item-css">
    <div v-if="ruleItem.textBeforefields"
         v-text="params[ruleItem.textBeforefields]"></div>
    <div v-text="ruleItem.textBefore"></div>
      <el-tooltip :open-delay="1000" :disabled="!getTextWidthOd" :content="String(params[ruleItem.fields])" placement="top" effect="light">
        <el-input v-model="params[ruleItem.fields]"
              :placeholder="ruleItem.hint"
              size="mini"
              @input="inpLimit"
              :style="{ width: ruleItem.width ? `${ruleItem.width}px` : '100%' }"
              class="input-box "></el-input>
      </el-tooltip>
    <div v-html="ruleItem.textAfter"></div>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/next-ticket-rule-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {

    }
  },
  methods: {
    inpLimit (val) {
      // eslint-disable-next-line
      this.params[this.ruleItem.fields] = val.replace(/[^\.\d-]/g, '')
    }
  }
}
</script>

<style scoped lang='scss'>
.rule-item-css {
  display: flex;
  justify-content: flex-start;
  .input-box {
    margin: 0 10px;
  }
}
</style>
